<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>在线视频播放</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/style5.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>
<div th:replace="header::header1"></div><br/><br/><br/>
<div class="panel panel-default">
    <div class="panel-body" align="center">
        <div id="a1" align="center" th:text="${title}"></div><br/>
        <video width="600" height="400" align="center" controls>
            <source th:src="@{${path}}" type="video/mp4">
            您的浏览器不支持 HTML5 video 标签。
        </video>

    </div>
    <center>
    <button><a  th:href="ct " target="mainFrame">评论</a></button>
    <button><a th:href="@{'downloadVideoById?id='+${video_id}}">下载</a></button>
    <button><a th:href="@{'getVideoListByOnly?videoId='+${video_id}}">实时推荐</a></button>
    <button><a th:href="@{'getVideoListByAuthor'}">他的视频</a></button>
    <button><a th:href="@{'getOtherVideoListByType'}">同类视频</a></button>
    </center>

    <!--评论区域列表-->
    <div id="comment-container"  class="ui teal segment">
        <div th:fragment="commentList">
            <div class="ui threaded comments" style="max-width: 100%;">
                <h3 class="ui dividing header">评论</h3>
                <div class="comment" th:each="comment : ${comments}">
                    <a class="avatar">
                        <img th:src="@{${comment.avatar}}">
                    </a>
                    <div class="content">
                        <a class="author" th:if="!${session.user.getUsername().equals(comment.nickname)}" th:href="'chat?toUser='+${comment.nickname}">
                            <span th:text="${comment.nickname}" >小红</span>
                        </a>

                        <span th:if="${session.user.getUsername().equals(comment.nickname)}" th:text="${comment.nickname}">小红</span>

                        <div class="metadata">
                            <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                        </div>
                        <div class="text" th:text="${comment.content}">
                            愿你走出半生，归来仍是少年！
                        </div>
                        <div class="actions">
                            <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                        </div>
                    </div>
                    <!--子集评论-->
                    <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                        <div class="comment" th:each="reply : ${comment.replyComments}">
                            <a class="avatar">
                                <img  th:src="@{${reply.avatar}}">
                            </a>
                            <div class="content">
                                <a class="author" >
                                    <a th:if="!${session.user.getUsername().equals(reply.nickname)}" th:href="'chat?toUser='+${reply.nickname}"><span th:text="${reply.nickname}"></span></a>
                                    <span th:if="${session.user.getUsername().equals(reply.nickname)}"  th:text="${reply.nickname}"></span>
                                    <a th:if="!${session.user.getUsername().equals(reply.parentNickname)}" th:href="'chat?toUser='+${reply.parentNickname}" class="m-teal"><span th:text="|@ ${reply.parentNickname}|" ></span></a>
                                    <span th:if="${session.user.getUsername().equals(reply.parentNickname)}" th:text="|@ ${reply.parentNickname}|" class="m-teal"></span>
                                </a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                </div>
                                <div class="text" th:text="${reply.content}">
                                    你也是！
                                </div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


</body>

</html>